<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>06_列表渲染</title>
  </head>
  <body>
    <!--
1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
-->

    <div id="demo">
      <h2>测试: v-for 遍历数组</h2>
      <ul>
        <li v-for="(item, index) in persons" :key="item.id">
          {{ item.id }} -- {{ item.name }} -- {{ item.age }} -- {{ index }}
        </li>
      </ul>

      <ul>
        <li v-for="person in persons" :key="person.id">
          {{ person.id }} -- {{ person.name }} -- {{ person.age }}
        </li>
      </ul>
      <h2>测试: v-for 遍历对象</h2>
      <ul>
        <li v-for="(value, key) in persons[0]" :key="key">
          {{ key }} -- {{ value }}
        </li>
      </ul>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: "#demo",
        data: {
          persons: [
            { id: 1, name: "沛华", age: 18 },
            { id: 2, name: "海静", age: 38 },
            { id: 3, name: "电雷", age: 28 },
          ],
        },
      });
    </script>
  </body>
</html>
